<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* Echarts (https://github.com/apache/echarts)
* vue-echarts (https://github.com/ecomfe/vue-echarts)
* ant-design-vue (https://github.com/vueComponent/ant-design-vue)
* vue-iclient (https://github.com/SuperMap/vue-iclient)
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-12/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_natureResourcePlatform_Vue"></title>
        <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
        <script
            include="echarts-vue,ant-design-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
            src="../../dist/mapboxgl/include-mapboxgl.js"
        ></script>
        <style>
            #main {
                margin: 0 auto;
                width: 100%;
                height: 100vh;
                overflow: hidden;
                box-sizing: border-box;
            }

            @media screen and (max-width: 992px) {
                #main {
                    overflow: auto;
                }
            }

            @media screen and (max-height: 640px) {
                #main {
                    overflow: auto;
                }
            }
        </style>
    </head>

    <body style="margin: 0; background: #192d2f">
        <div id="main">
            <sm-layout-header>
                <div class="dashboard-header">
                    <div class="left-header">
                        <sm-text class="btn-active" v-bind="textPropsCommon" title="指标总览"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="调查监测"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="耕地保护"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="空间规划"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="用途管制"></sm-text>
                    </div>
                    <sm-text class="middle-header" v-bind="headerTitleProps"></sm-text>
                    <div class="right-header">
                        <sm-text v-bind="textPropsCommon" title="权益保护"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="地质矿产"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="生态修复"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="确权登记"></sm-text>
                        <sm-text v-bind="textPropsCommon" title="执法监察"></sm-text>
                    </div>
                </div>
            </sm-layout-header>

            <sm-layout-content>
                <a-row>
                    <a-col :span="6">
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="调查监测"></sm-text>
                            <div class="indicator-group">
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                            </div>
                            <div class="indicator-background">
                                <div class="indicator-background-item">
                                    <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                    <div class="circle-center">
                                        <sm-text title="国土空间用地构成"></sm-text>
                                    </div>
                                    <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                </div>
                                <div class="indicator-background-item">
                                    <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                </div>
                            </div>
                        </sm-border>
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="耕地保护"></sm-text>
                            <div class="indicator-bar">
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                            </div>
                            <sm-chart v-bind="lineChartProps"></sm-chart>
                        </sm-border>
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="空间规划"></sm-text>
                            <div class="indicator-bar">
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                            </div>
                            <div class="datalist-container">
                                <div class="datalist-item">
                                    <sm-text title="生态保护红线"></sm-text>
                                    <sm-text v-bind="textNumberProps" title="5.0"></sm-text>
                                    <sm-indicator v-bind="indicatorNumberProps"></sm-indicator>
                                </div>
                                <div class="datalist-item">
                                    <sm-text title="生态保护红线"></sm-text>
                                    <sm-text v-bind="textNumberProps" title="5.0"></sm-text>
                                    <sm-indicator v-bind="indicatorNumberProps"></sm-indicator>
                                </div>
                                <div class="datalist-item">
                                    <sm-text title="生态保护红线"></sm-text>
                                    <sm-text v-bind="textNumberProps" title="5.0"></sm-text>
                                    <sm-indicator v-bind="indicatorNumberProps"></sm-indicator>
                                </div>
                            </div>
                        </sm-border>
                    </a-col>
                    <a-col :span="12">
                        <a-row class="middle-map-box">
                            <sm-web-map v-bind="mapProps"></sm-web-map>
                        </a-row>
                        <a-row class="middle-grid-box">
                            <sm-border
                                :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                                class="container"
                            >
                                <sm-text class="container-title" v-bind="textGridTitle" title="执法监察"></sm-text>
                                <div class="chart-container">
                                    <div class="chart-box-item">
                                        <sm-text title="新增建设用地"></sm-text>
                                        <sm-chart v-bind="gaugeChartProps"></sm-chart>
                                    </div>
                                    <div class="chart-box-item">
                                        <sm-text title="新增建设用地"></sm-text>
                                        <sm-chart v-bind="gaugeChartProps"></sm-chart>
                                    </div>
                                </div>
                                <div>
                                    <div class="land-indicator-container">
                                        <div class="land-indicator-row">
                                            <div class="land-indicator-item">
                                                <sm-image v-bind="imageProps"></sm-image>
                                                <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                            </div>
                                            <div class="land-indicator-item">
                                                <sm-image v-bind="imageProps"></sm-image>
                                                <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                            </div>
                                        </div>
                                        <div class="land-indicator-row">
                                            <div class="land-indicator-item">
                                                <sm-image v-bind="imageProps"></sm-image>
                                                <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                            </div>
                                            <div class="land-indicator-item">
                                                <sm-image v-bind="imageProps"></sm-image>
                                                <sm-indicator v-bind="landIndicatorProps"></sm-indicator>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </sm-border>
                            <sm-border
                                :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                                class="container"
                            >
                                <sm-text class="container-title" v-bind="textGridTitle" title="生态修复"></sm-text>
                                <div class="indicator-bar">
                                    <sm-indicator v-bind="indicatorBar"></sm-indicator>
                                    <sm-indicator v-bind="indicatorBar"></sm-indicator>
                                    <div class="project-list">
                                      <div class="project-list-item">
                                        <sm-text title="85.2"></sm-text>
                                        <div class="project-list-item-color1"></div>
                                        <sm-text title="沙化土地"></sm-text>
                                      </div>
                                      <div class="project-list-item">
                                        <sm-text title="85.2"></sm-text>
                                        <div class="project-list-item-color2"></div>
                                        <sm-text title="沙化土地"></sm-text>
                                      </div>
                                      <div class="project-list-item">
                                        <sm-text title="85.2"></sm-text>
                                        <div class="project-list-item-color3"></div>
                                        <sm-text title="沙化土地"></sm-text>
                                      </div>
                                    </div>
                                    <div class="project-container">
                                        <div class="project-item">
                                            <sm-text
                                                class="text-circle"
                                                v-bind="projectTextProps"
                                                title="10%"
                                            ></sm-text>
                                            <sm-text title="立项（个）"></sm-text>
                                        </div>
                                        <div class="project-item">
                                            <sm-text
                                                class="text-circle"
                                                v-bind="projectTextProps"
                                                title="10%"
                                            ></sm-text>
                                            <sm-text title="立项（个）"></sm-text>
                                        </div>
                                        <div class="project-item">
                                            <sm-text
                                                class="text-circle"
                                                v-bind="projectTextProps"
                                                title="10%"
                                            ></sm-text>
                                            <sm-text title="立项（个）"></sm-text>
                                        </div>
                                    </div>
                                </div>
                            </sm-border>
                        </a-row>
                    </a-col>
                    <a-col :span="6">
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="确权登记"></sm-text>
                            <div class="indicator-group">
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                                <sm-indicator v-bind="indicatorGroup"></sm-indicator>
                            </div>
                            <sm-chart v-bind="lineChartProps"></sm-chart>
                        </sm-border>
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="执法监察"></sm-text>
                            <div class="indicator-bar">
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                                <sm-indicator v-bind="indicatorBar"></sm-indicator>
                            </div>
                            <sm-chart v-bind="chartXBarProps"></sm-chart>
                        </sm-border>
                        <sm-border
                            :custom-border="{src:'../img/background/border14.png', 'borderWidth': [12, 12, 12, 12], 'borderEdge':{'top': 12, 'left': 12, 'right': 12, 'bottom': 12}}"
                            class="container"
                        >
                            <sm-text class="container-title" v-bind="textGridTitle" title="地质矿产"></sm-text>
                            <div class="miner-container">
                                <sm-indicator v-bind="indicatorMinerProps"></sm-indicator>
                                <sm-indicator v-bind="indicatorMinerProps"></sm-indicator>
                            </div>
                            <div class="miner-container">
                                <sm-indicator v-bind="indicatorMinerProps"></sm-indicator>
                                <sm-indicator v-bind="indicatorMinerProps"></sm-indicator>
                            </div>
                        </sm-border>
                    </a-col>
                </a-row>
            </sm-layout-content>
        </div>

        <script>
            //本示例数据纯属虚构
            new Vue({
                el: '#main',
                data() {
                    return {
                        headerTitleProps: {
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '自然资源承载能力监管决策平台',
                            href: '',
                            target: '_blank',
                            fontStyle: {
                                fontSize: 32,
                                fontWeight: 'bolder',
                                justifyContent: 'center',
                                textAlign: 'center',
                                textIndent: 0,
                                fontFamily: '微软雅黑'
                            },
                            lineHeightUnit: 'px',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        textPropsCommon: {
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            href: '',
                            target: '_blank',
                            fontStyle: {
                                fontSize: 16,
                                lineHeight: 1.5,
                                fontWeight: 'normal',
                                justifyContent: 'center',
                                textAlign: 'center',
                                textIndent: 0,
                                fontFamily: '微软雅黑'
                            },
                            lineHeightUnit: 'multiples',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        textGridTitle: {
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '耕地保护',
                            href: '',
                            target: '_blank',
                            fontStyle: {
                                fontSize: 16,
                                lineHeight: 1.5,
                                fontWeight: 'normal',
                                justifyContent: 'center',
                                textAlign: 'center',
                                textIndent: 0,
                                fontFamily: '微软雅黑'
                            },
                            lineHeightUnit: 'multiples',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        indicatorGroup: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '农用地占比',
                            unit: '%',
                            num: '65',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'vertical',
                            indicatorColor: '#84F0F9',
                            // fontSize: 18, ?
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            backgroundImage: './static/material/border/border15.png',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 12,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        indicatorBar: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '本年度耕地面积:',
                            unit: '元,',
                            num: '85.2',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'horizontal',
                            indicatorColor: '#E98F52',
                            // fontSize: 16,
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 14,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        lineChartProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            frequency: 2,
                            startTiming: false,
                            iconClass: '',
                            seriesType: 'line',
                            headerName: '',
                            dataset: { maxFeatures: 20, url: '', type: '' },
                            datasetOptions: [{ seriesType: 'line' }],
                            options: {
                                series: [
                                    {
                                        data: ['3900', '3340', '3300', '2500', '2000', '520', '100'],
                                        name: 'Y1',
                                        emphasis: { itemStyle: {} },
                                        stack: 0,
                                        type: 'line',
                                        smooth: true,
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        showAllSymbol: 'auto',
                                        symbol: 'emptyCircle',
                                        symbolSize: 8,
                                        itemStyle: { borderWidth: 2 },
                                        lineStyle: { color: '#3fb1e3' }
                                    },
                                    {
                                        data: ['3400', '3617', '4200', '1842', '3000', '800', '500'],
                                        name: 'Y2',
                                        emphasis: { itemStyle: {} },
                                        stack: 0,
                                        type: 'line',
                                        smooth: true,
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        showAllSymbol: 'auto',
                                        symbol: 'emptyCircle',
                                        symbolSize: 8,
                                        itemStyle: { borderWidth: 2 },
                                        lineStyle: { color: '#6be6c1' }
                                    }
                                ],
                                yAxis: {
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'right',
                                        margin: 8
                                    },
                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
                                    name: '',
                                    show: true,
                                    splitLine: {
                                        lineStyle: {
                                            width: 0.3,
                                            type: 'solid',
                                            color: '#ccc',
                                            opacity: 1
                                        },
                                        show: false
                                    },
                                    splitArea: { show: false },
                                    nameGap: 5,
                                    nameLocation: 'end',
                                    type: 'value',
                                    nameTextStyle: { padding: [0, 0, 5, 0] },
                                    axisTick: { show: true }
                                },
                                xAxis: {
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'center',
                                        margin: 8
                                    },
                                    data: ['Fri', 'Thu', 'Sat', 'Sun', 'Wed', 'Tue', 'Mon'],
                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
                                    show: true,
                                    name: '',
                                    axisTick: { alignWithLabel: true, show: true },
                                    splitLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: '#ccc',
                                            opacity: 1,
                                            width: 0.3
                                        },
                                        show: false
                                    },
                                    nameGap: 2,
                                    nameLocation: 'end',
                                    type: 'category',
                                    boundaryGap: true
                                },
                                grid: { top: 35, left: 50, bottom: 35, right: 20 },
                                legend: {
                                    data: ['Y1', 'Y2'],
                                    show: true,
                                    textStyle: { color: '#fff', fontSize: 12 },
                                    type: 'scroll',
                                    top: 'top',
                                    left: 'center'
                                },
                                tooltip: {
                                    axisPointer: { shadowStyle: {}, type: 'line' },
                                    trigger: 'axis',
                                    textStyle: { align: 'left' }
                                },
                                textStyle: { fontFamily: 'Microsoft YaHei Light' },
                                title: {
                                    padding: [5, 0, 0, 20],
                                    x: 'left',
                                    text: '',
                                    textStyle: {
                                        fontFamily: 'Microsoft YaHei Light',
                                        fontWeight: '100'
                                    }
                                }
                            },
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            isGradient: false,
                            animationDelay: true,
                            highlightColor: '#00eeff',
                            thresholdConfig: [
                                {
                                    show: false,
                                    type: 'data',
                                    dataConfig: [],
                                    rankConfig: []
                                },
                                {
                                    show: false,
                                    type: 'data',
                                    dataConfig: [],
                                    rankConfig: []
                                }
                            ]
                        },
                        textNumberProps: {
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            background: 'rgba(0,0,0,0)',
                            textColor: '#E98F52',
                            dataType: 'static',
                            title: '4.1',
                            href: '',
                            target: '_blank',
                            fontStyle: {
                                fontSize: 22,
                                lineHeight: 1.5,
                                fontWeight: 'bolder',
                                justifyContent: 'center',
                                textAlign: 'center',
                                textIndent: 0,
                                fontFamily: '微软雅黑'
                            },
                            lineHeightUnit: 'multiples',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        indicatorNumberProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '',
                            unit: '万km',
                            num: '5.0',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'vertical',
                            indicatorColor: '',
                            // fontSize: 18,
                            fontWeight: 'normal',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 14,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        indicatorMinerProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '地质调查项目',
                            unit: '个',
                            num: '15',
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'vertical',
                            indicatorColor: '#84F0F9',
                            // fontSize: 22,
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 14,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        projectTextProps: {
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            background: 'rgba(0,0,0,0)',
                            textColor: '#84F0F9',
                            dataType: 'static',
                            title: '10%',
                            href: '',
                            target: '_blank',
                            fontStyle: {
                                fontSize: 18,
                                lineHeight: 1.5,
                                fontWeight: 'bolder',
                                justifyContent: 'center',
                                textAlign: 'center',
                                textIndent: 0,
                                fontFamily: '微软雅黑'
                            },
                            lineHeightUnit: 'multiples',
                            backgroundImage: './static/material/image/image4.png',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        gaugeChartProps: {
                            dataType: 'static',
                            value: 36,
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            frequency: 2,
                            startTiming: false,
                            iconClass: '',
                            seriesType: 'gauge',
                            headerName: '',
                            dataset: {
                                maxFeatures: 20,
                                url: '',
                                type: '',
                                withCredentials: false
                            },
                            datasetOptions: [{ seriesType: 'gauge' }],
                            options: {
                                series: [
                                    {
                                        name: 'inLoop',
                                        type: 'gauge',
                                        min: 0,
                                        max: 100,
                                        center: ['50%', '50%'],
                                        startAngle: 180,
                                        endAngle: 0,
                                        splitNumber: 10,
                                        radius: '102%',
                                        data: [{ value: 36, name: '完成率' }],
                                        title: {
                                            show: false,
                                            textStyle: { fontSize: 14, color: '#ffffff' }
                                        },
                                        detail: {
                                            show: true,
                                            textStyle: { fontSize: 20, color: '#ffffff' }
                                        },
                                        axisTick: {
                                            show: false,
                                            length: 13,
                                            lineStyle: { width: 1, color: '#fff' }
                                        },
                                        splitLine: {
                                            show: false,
                                            length: 20,
                                            lineStyle: { width: 2, color: '#fff' }
                                        },
                                        axisLabel: {
                                            show: false,
                                            fontSize: 12,
                                            fontWeight: 'normal',
                                            distance: 16,
                                            color: '#fff'
                                        },
                                        axisLine: {
                                            show: true,
                                            lineStyle: {
                                                color: [
                                                    [0.36, '#1ADDD3'],
                                                    [1, '#747070']
                                                ],
                                                width: 8
                                            }
                                        },
                                        pointer: { show: false, length: '75%', width: 7 },
                                        itemStyle: { show: false, color: 'auto' }
                                    },
                                    {
                                        name: 'outLoop',
                                        type: 'gauge',
                                        min: 0,
                                        max: 100,
                                        center: ['50%', '50%'],
                                        startAngle: 225,
                                        endAngle: -45,
                                        splitNumber: 10,
                                        radius: '75%',
                                        title: { show: false },
                                        detail: { show: false },
                                        axisTick: {
                                            show: false,
                                            length: -8,
                                            lineStyle: { width: 1, color: '' },
                                            splitNumber: 7
                                        },
                                        splitLine: {
                                            show: false,
                                            length: -20,
                                            lineStyle: { width: 2, color: '' }
                                        },
                                        axisLabel: {
                                            show: false,
                                            fontSize: 12,
                                            fontWeight: 'normal',
                                            distance: 25
                                        },
                                        axisLine: { show: false },
                                        pointer: { show: false },
                                        itemStyle: { show: true, color: '' }
                                    }
                                ]
                            },
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        imageProps: {
                            background: 'rgba(0,0,0,0)',
                            src: '../img/background/image3.png',
                            repeat: 'center',
                            href: '',
                            target: '_blank',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            textColor: '#fff',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        },
                        landIndicatorProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            dataType: 'static',
                            title: '新增建设用地面积',
                            unit: '元',
                            num: 1232,
                            animated: false,
                            duration: 1000,
                            separator: ',',
                            mode: 'vertical',
                            indicatorColor: '#E98F52',
                            // fontSize: 16,
                            fontWeight: 'bolder',
                            frequency: 2,
                            startTiming: false,
                            url: '',
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            numSpacing: 0,
                            showTitleUnit: true,
                            numBackground: { color: 'rgba(0, 0, 0, 0)', image: '' },
                            separatorBackground: false,
                            decimals: -1,
                            thresholdsStyle: [],
                            textFontSize: 12,
                            titleField: 'title',
                            unitField: 'unit',
                            numField: 'num'
                        },
                        mapProps: {
                            mapId: 1887887232,
                            name: 'landuse',
                            serverUrl: 'https://www.supermapol.com',
                            target: 'map_1599996603987',
                            layers: [],
                            tdtComponents: {
                                tdtRoute: {
                                    data: {
                                        carUrl: 'https://api.tianditu.gov.cn/drive',
                                        busUrl: 'https://api.tianditu.gov.cn/transit',
                                        searchUrl: 'https://api.tianditu.gov.cn/search',
                                        tk: ''
                                    },
                                    headerName: '路线',
                                    background: 'rgba(0,0,0,0.3)',
                                    textColor: '#fff',
                                    show: false,
                                    position: 'bottom-right',
                                    uri: 'mapboxgl/tdt/route/TdtRoute',
                                    collapsed: true
                                },
                                tdtSearch: {
                                    data: {
                                        searchUrl: 'https://api.tianditu.gov.cn/search',
                                        tk: ''
                                    },
                                    background: 'rgba(0,0,0,0.3)',
                                    textColor: '#fff',
                                    show: false,
                                    position: 'bottom-right',
                                    uri: 'mapboxgl/tdt/search/TdtSearch',
                                    collapsed: true
                                },
                                tdtMapSwitcher: {
                                    data: { select: '', label: true, tk: '' },
                                    headerName: '地图切换',
                                    show: false,
                                    background: 'rgba(0,0,0,0.3)',
                                    textColor: '#fff',
                                    position: 'bottom-right',
                                    uri: 'mapboxgl/tdt/mapSwitcher/TdtMapSwitcher',
                                    collapsed: true
                                }
                            },
                            zoomControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'top-left',
                                showZoomSlider: false
                            },
                            scaleControl: {
                                background: 'rgba(0,0,0,0)',
                                textColor: '#3fb1e3',
                                show: false,
                                position: 'bottom-left'
                            },
                            panControl: { show: false, position: 'top-left' },
                            miniMapControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'bottom-right',
                                collapsed: true
                            },
                            layerListControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'top-right',
                                collapsed: true
                            },
                            measureControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'top-right',
                                showUnitSelect: true,
                                distanceDefaultUnit: 'kilometers',
                                areaDefaultUnit: 'kilometers',
                                collapsed: true
                            },
                            legendControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'bottom-left',
                                headerName: '',
                                layerNames: [],
                                isShowTitle: false,
                                isShowField: false,
                                mode: 'panel',
                                collapsed: false
                            },
                            queryControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'top-right',
                                collapsed: true,
                                restMap: null,
                                restData: null,
                                iportalData: null,
                                headerName: '查询',
                                layerStyle: {
                                    line: {
                                        paint: {
                                            'line-width': 3,
                                            'line-color': '#409eff',
                                            'line-opacity': 1
                                        }
                                    },
                                    circle: {
                                        paint: {
                                            'circle-color': '#409eff',
                                            'circle-opacity': 0.6,
                                            'circle-radius': 8,
                                            'circle-stroke-width': 2,
                                            'circle-stroke-color': '#409eff',
                                            'circle-stroke-opacity': 1
                                        }
                                    },
                                    fill: {
                                        paint: {
                                            'fill-color': '#409eff',
                                            'fill-opacity': 0.6,
                                            'fill-outline-color': '#409eff'
                                        }
                                    },
                                    stokeLine: {
                                        paint: {
                                            'line-width': 3,
                                            'line-color': '#409eff',
                                            'line-opacity': 1
                                        }
                                    }
                                }
                            },
                            searchControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                position: 'top-right',
                                maxFeatures: 8,
                                layerNames: null,
                                addressMatch: null,
                                restMap: null,
                                restData: null,
                                iportalData: null,
                                onlineLocalSearch: { enable: true, city: '北京市' },
                                collapsed: true
                            },
                            identifyControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                show: false,
                                layers: {},
                                fields: {},
                                layerStyle: {
                                    line: {
                                        paint: { 'line-color': '#409eff', 'line-opacity': 1 }
                                    },
                                    circle: {
                                        paint: {
                                            'circle-color': '#409eff',
                                            'circle-opacity': 0.6,
                                            'circle-stroke-color': '#409eff',
                                            'circle-stroke-opacity': 1
                                        }
                                    },
                                    fill: {
                                        paint: {
                                            'fill-color': '#409eff',
                                            'fill-opacity': 0.6,
                                            'fill-outline-color': '#409eff'
                                        }
                                    },
                                    stokeLine: {
                                        paint: { 'line-color': '#409eff', 'line-opacity': 1 }
                                    }
                                }
                            },
                            layerManagerControl: {
                                background: 'rgba(0,0,0,0.3)',
                                textColor: '#fff',
                                headerName: '图层管理',
                                defaultExpandAll: true,
                                collapsed: true,
                                position: 'top-right',
                                show: false,
                                layers: [],
                                mapTarget: null
                            },
                            mapOptions: {
                                style: { version: 8, sources: {}, layers: [] },
                                center: [108.8596, 23.8136],
                                zoom: 14.12,
                                bearing: 24.44,
                                pitch: 44.5,
                                tileSize: 256
                            },
                            layerStyle: {
                                circle: {
                                    paint: {
                                        'circle-color': '#4fcfff',
                                        'circle-opacity': 0.8,
                                        'circle-stroke-color': '#4fcfff',
                                        'circle-stroke-opacity': 1,
                                        'circle-radius': 8,
                                        'circle-stroke-width': 2
                                    }
                                },
                                line: {
                                    paint: {
                                        'line-color': '#4fcfff',
                                        'line-opacity': 1,
                                        'line-width': 2
                                    }
                                },
                                stokeLine: {
                                    paint: {
                                        'line-width': 2,
                                        'line-color': '#4fcfff',
                                        'line-opacity': 1
                                    }
                                },
                                fill: {
                                    paint: {
                                        'fill-color': '#4fcfff',
                                        'fill-opacity': 0.6,
                                        'fill-outline-color': '#4fcfff'
                                    }
                                }
                            },
                            highlightLayerStyle: {
                                circle: {
                                    paint: {
                                        'circle-color': '#01ffff',
                                        'circle-opacity': 0.8,
                                        'circle-stroke-color': '#01ffff',
                                        'circle-stroke-opacity': 0
                                    }
                                },
                                line: { paint: { 'line-color': '#01ffff', 'line-opacity': 1 } },
                                stokeLine: {
                                    paint: {
                                        'line-width': 2,
                                        'line-color': '#01ffff',
                                        'line-opacity': 1
                                    }
                                },
                                fill: {
                                    paint: {
                                        'fill-color': '#01ffff',
                                        'fill-opacity': 0.6,
                                        'fill-outline-color': '#01ffff'
                                    }
                                }
                            },
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            fixedMap: 'unFixed',
                            layersIdField: {},
                            trackLayers: [],
                            withCredentials: false
                        },
                        chartXBarProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            frequency: 2,
                            startTiming: false,
                            headerName: '',
                            iconClass: '',
                            seriesType: 'xBar',
                            dataset: { maxFeatures: 10, type: 'geoJSON' },
                            datasetOptions: [
                                {
                                    seriesType: 'bar',
                                    isStastic: false,
                                    isStack: false,
                                    xField: '最高七天气温_num',
                                    yField: '最高气温',
                                    sort: 'unsort',
                                    rankLabel: false
                                },
                                {
                                    seriesType: 'bar',
                                    isStastic: false,
                                    isStack: false,
                                    xField: '最高七天气温_num',
                                    yField: '最低气温',
                                    sort: 'unsort',
                                    rankLabel: false
                                }
                            ],
                            options: {
                                yAxis: {
                                    show: true,
                                    type: 'category',
                                    name: '',
                                    nameLocation: 'end',
                                    nameGap: 2,
                                    axisTick: { alignWithLabel: true, show: true },
                                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'right',
                                        margin: 8
                                    },
                                    splitLine: {
                                        lineStyle: {
                                            width: 0.3,
                                            type: 'solid',
                                            color: '#ccc',
                                            opacity: 1
                                        },
                                        show: false
                                    },
                                    boundaryGap: true
                                },
                                xAxis: {
                                    type: 'value',
                                    name: '',
                                    nameLocation: 'end',
                                    nameGap: 5,
                                    show: true,
                                    scale: false,
                                    axisLine: { lineStyle: { color: '#fff' }, show: true },
                                    axisLabel: {
                                        rotate: 0,
                                        fontFamily: 'MicrosoftYaHei',
                                        show: true,
                                        color: '#fff',
                                        fontSize: 12,
                                        align: 'center',
                                        margin: 8
                                    },
                                    splitLine: {
                                        lineStyle: {
                                            type: 'solid',
                                            color: '#ccc',
                                            opacity: 1,
                                            width: 0.3
                                        },
                                        show: false
                                    },
                                    splitArea: { show: false },
                                    nameTextStyle: { padding: [0, 0, 5, 0] },
                                    min: -50,
                                    max: 50,
                                    axisTick: { show: true }
                                },
                                grid: { left: 50, right: 50, top: 35, bottom: 35 },
                                legend: {
                                    type: 'scroll',
                                    data: ['最高气温', '最低气温'],
                                    show: false,
                                    top: 'top',
                                    left: 'center',
                                    textStyle: { color: '#fff', fontSize: 12 }
                                },
                                series: [
                                    {
                                        data: ['500', '800', '3000', '3617', '3400', '4200', '1842'],
                                        name: 'Y2',
                                        emphasis: { itemStyle: {} },
                                        stack: 0,
                                        type: 'bar',
                                        barWidth: 10,
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        itemStyle: { barBorderRadius: [0, 0, 0, 0] }
                                    },
                                    {
                                        data: ['-450', '-700', '-2000', '-2617', '-2400', '-3200', '-2842'],
                                        name: 'Y1',
                                        emphasis: { itemStyle: {} },
                                        stack: 0,
                                        type: 'bar',
                                        barWidth: 10,
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        itemStyle: { barBorderRadius: [0, 0, 0, 0] }
                                    },
                                    {
                                        type: 'bar',
                                        animationEasing: 'quadraticIn',
                                        animationEasingUpdate: 'quadraticIn',
                                        label: {
                                            normal: {
                                                position: 'top',
                                                show: false,
                                                textStyle: { fontSize: 12 },
                                                smart: false
                                            }
                                        },
                                        barWidth: 0,
                                        itemStyle: { barBorderRadius: [0, 0, 0, 0] }
                                    }
                                ],
                                tooltip: {
                                    axisPointer: { shadowStyle: {}, type: 'shadow' },
                                    trigger: 'axis',
                                    textStyle: { align: 'left' }
                                },
                                textStyle: { fontFamily: 'Microsoft YaHei Light' },
                                title: {
                                    padding: [5, 0, 0, 20],
                                    x: 'left',
                                    text: '',
                                    textStyle: {
                                        fontFamily: 'Microsoft YaHei Light',
                                        fontWeight: '100'
                                    }
                                }
                            },
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad'],
                            isGradient: false,
                            animationDelay: true,
                            highlightColor: '#00eeff',
                            thresholdConfig: [
                                {
                                    show: false,
                                    type: 'data',
                                    dataConfig: [],
                                    rankConfig: []
                                },
                                {
                                    show: false,
                                    type: 'data',
                                    dataConfig: [],
                                    rankConfig: []
                                }
                            ],
                            field: 'smid',
                            orderYField: '最高气温'
                        },
                        iconProps: {
                            background: 'rgba(0,0,0,0)',
                            textColor: '#fff',
                            iconStyle: { fontSize: 18, color: '' },
                            iconClass: 'sm-mapdashboard-user-icon-zoom-to',
                            autoPrefix: false,
                            backgroundImage: '',
                            backgroundRepeat: 'noRepeat',
                            backgroundGradient: false,
                            gradientDirection: 'left',
                            colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
                        }
                    };
                },
                mounted() {
                    let screenWidth = document.body.clientWidth;
                    if (screenWidth <= 540) {
                        this.showMap = false;
                    }
                }
            });
        </script>
        <style>
            html {
                font-size: 10px;
            }
            .container {
                width: 24vw;
                height: 29vh;
                margin: 10px 8px;
            }

            .container .container-title {
                height: 35px;
                margin-top: -12px;
                font-size: 14px;
                background-image: url('../img/background/image2.png') !important;
            }

            .indicator-group {
                width: 420px;
                height: 55px;
                display: flex;
                margin-top: 10px;
                justify-content: space-around;
            }

            .chart-container {
                width: 80%;
                margin: 5px auto;
                display: flex;
                height: 100px;
                justify-content: space-around;
            }

            .chart-box-item {
                width: 30%;
                height: 80px;
            }
            .chart-box-item .sm-component-chart {
                height: 80px;
            }

            .project-list {
              width: 80%;
              height: 50px;
              display: flex;
              margin: 5px auto;
              justify-content: space-around;
            }

            .project-list .project-list-item {
              width: 33.3%;
            }

            .project-list .project-list-item > div {
              height: 16px;
            }

            .project-list .project-list-item .project-list-item-color1 {
              background: #3D7CB3;
            }

            .project-list .project-list-item .project-list-item-color2 {
              background: #3DB346;
            }

            .project-list .project-list-item .project-list-item-color3 {
              background: #5F676E;
            }


            .indicator-bar {
                text-align: center;
                height: 30px;
                margin-top: 15px;
                font-size: 14px;
            }

            .sm-component-layout-header {
                padding: 0px;
                background: none;
            }

            .sm-component-chart {
                height: 18vh;
            }

            .circle-center {
                width: 75px;
                height: 75px;
                background-image: url('../img/background/image3.png');
                background-size: cover;
            }

            .sm-component-layout-content {
                margin-top: 20px;
            }

            .left-header {
                width: 34%;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            .btn-active span {
                background-image: url('../img/background/image8.png') !important;
                background-size: contain;
            }

            .miner-container {
                width: 380px;
                height: 98px;
                margin: 10px auto;
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-image: url('../img/background/image5.png');
            }

            .indicator-background {
                width: 80%;
                height: 140px;
                margin: 10px auto;
                background-image: url('../img/background/image11.png');
            }

            .indicator-background-item {
                height: 64px;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            .indicator-background-item .sm-component-indicator .sm-component-indicator__title {
                font-size: 12px;
            }

            .miner-container .sm-component-indicator {
                margin-left: 60px;
            }

            .middle-grid-box {
                height: 281px;
                display: flex;
                justify-content: space-around;
            }

            .middle-map-box {
                width: 910px;
                height: 58vh;
                margin: 20px auto 2px;
            }

            .datalist-container {
                width: 360px;
                height: 120px;
                margin: 60px auto 0px;
            }

            .datalist-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 30px;
                margin-bottom: 10px;
                background-image: url('../img/background/image6.png');
            }

            .datalist-item > .sm-component-text {
                margin-left: 20px;
            }

            .sm-component-text {
                background: none !important;
                color: #fff !important;
            }

            .land-indicator-container {
                width: 90%;
                margin: 2px auto 0px;
            }

            .land-indicator-row {
                height: 46px;
                display: flex;
                margin-bottom: 10px;
                justify-content: space-around;
                align-items: center;
            }

            .land-indicator-item {
                display: flex;
                position: relative;
                justify-content: space-around;
                align-items: center;
            }

            .land-indicator-row .land-indicator-item .sm-component-image {
                width: 46px;
                height: 46px;
            }

            .land-indicator-row .land-indicator-item .sm-component-indicator .sm-component-indicator__title {
                font-size: 12px;
            }

            .right-header {
                width: 34%;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            .dashboard-header {
                background-image: url('../img/background/image1.png');
                height: 72px;
                display: flex;
                align-items: center;
            }
            .middle-header {
                font-size: 32px;
                display: flex;
                height: 72px;
                width: 612px;
            }

            .project-container {
                width: 392px;
                height: 98px;
                margin: 0px auto 0px;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            .project-container > .project-item {
                width: 80px;
                height: 100%;
            }

            .project-container > .project-item .text-circle {
                width: 100%;
                height: 64px;
                background-image: url('../img/background/image4.png') !important;
                background-size: 90% 90%;
            }

            .project-container > .project-item .sm-component-text {
              margin-top: 10px;
              width: 80px;
            }

            .project-container > .project-item .sm-component-text .sm-component-text__span {
              margin-top: 8px;
            }

            @media (max-width: 540px) {
                html {
                    font-size: 10px;
                }
                .left-container {
                    padding-top: 0;
                }
                .map-wrap {
                    width: 100vw;
                    height: 90vh;
                }
            }
            @media (min-width: 1200px) {
                html {
                    font-size: 16px;
                }
            }
        </style>
    </body>
</html>
